<style>
  .container {
    border: 1px solid red;
  }

  .div1,
  .div2 {
    width: 100px;
    height: 100px;
    border: 1px solid #00A4CC;
    background-color: #3e8f3e;
  }

  .div1 {
    margin: 20px 0;
  }

  .div2 {
    margin: 40px 0;
  }
</style>
</head>

<body>
  在正常流里垂直边距（vertical margin）是重叠的。也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！

  <div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
  </div>

</body>